<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐</title>
  <!-- 
  在Node.js中，CORS（跨域资源共享）是解决跨域请求问题的一种常用方案。CORS允许服务器指定哪些源可以访问其资源，从而解决浏览器的同源策略限制。
  1. 什么是CORS？
  CORS（Cross-Origin Resource Sharing）是一种机制，它使用HTTP头部来告诉浏览器，允许哪些域可以访问当前资源。通过CORS，服务器可以控制哪些外部网站可以访问其API。

  2. CORS的基本原理
  当浏览器发起跨域请求时，会先发送一个预检请求（OPTIONS），以确认目标服务器是否允许该请求。服务器通过设置相应的CORS头部来响应这个预检请求。

  3. 常用的CORS头部

  - Access-Control-Allow-Origin: 指定允许哪些源访问资源。可以是具体的域名，也可以是 `*` （允许所有域）。
  http
    Access-Control-Allow-Origin: http://example.com
  - Access-Control-Allow-Methods: 指定允许的HTTP方法，如 `GET` 、 `POST` 、 `PUT` 等。
  http
    Access-Control-Allow-Methods: GET, POST, PUT
  - Access-Control-Allow-Headers: 指定允许的请求头部。
  http
    Access-Control-Allow-Headers: Content-Type, Authorization
  - Access-Control-Allow-Credentials: 指定是否允许发送Cookie等凭证。
  http
    Access-Control-Allow-Credentials: true
  4. 在Node.js中使用CORS

   1. 安装CORS中间件

  首先，使用npm安装CORS中间件：
  npm install cors
   2. 在Express应用中使用CORS

  以下是一个简单的示例，展示如何在Node.js的Express应用中使用CORS：
  const express = require('express');
  const cors = require('cors');

  const app = express();

  // 使用CORS中间件，允许所有源
  app.use(cors());

  // 或者配置特定的源
  app.use(cors({
      origin: 'http://example.com'
  }));

  app.get('/data', (req, res) => {
      res.json({ message: 'This is CORS-enabled for all origins.' });
  });

  app.listen(3000, () => {
      console.log('Server is running on http://localhost:3000');
  });
  5. 注意事项

  - 安全性: 在生产环境中，建议不要使用 `Access-Control-Allow-Origin: *` ，而是指定具体的域名，以防止安全风险。
  - 预检请求: 某些请求（如使用PUT、DELETE方法，或自定义请求头）会触发预检请求，服务器需要正确处理OPTIONS请求。
  - 支持: 大多数现代浏览器支持CORS，但在使用时仍需考虑兼容性。

  6. 其他CORS配置

  - 设置多个源: 如果需要支持多个源，可以在CORS中间件中使用函数来动态设置 `Access-Control-Allow-Origin` 。
  app.use(cors((req, callback) => {
      const allowedOrigins = ['http://example.com', 'http://another-domain.com'];
      const origin = req.header('Origin');
      if (allowedOrigins.indexOf(origin) !== -1) {
          callback(null, true);
      } else {
          callback(new Error('Not allowed by CORS'));
      }
  }));
  -->
</head>

<body>
  <h1>网易云音乐项目</h1>

  <script>
    // 1.XHR网络请求
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
    xhr.open('get', 'http://localhost:8000/users/list')
    xhr.send()


    // 2.fetch网络请求
    fetch('http://localhost:8000/users/list').then(async res => {
      const result = await res.json()
      console.log(result)
    })
  </script>
</body>

</html>